<template>
    <div class="app">

        <myNavbar title="会员管理"></myNavbar>
        <div class="search_content">
            <div class="search_input_content">
                <text class="iconTwo">&#xe62f;</text>
                <input placeholder="请输入手机号、姓名搜索" v-model="member" class="search_input" @input="searchGoods"
                       :goods="goods"
                       return-key-type="search" @return="bindconfirm"></input>
                <div class="icon_cancel" @click="empty" v-if="member!=''">
                    <text class="iconTwo">&#xe6ce;</text>
                </div>
            </div>
        </div>
        <div class="addMember-content" @click="addMember">
            <div class="addMember-text">
                <text class="addmember">&#xe618;</text>
                <text class="text">新增会员</text>
            </div>
            <div>
                <text class="icon">&#xe61f;</text>
            </div>
        </div>
        <list class="message_item_content">
            <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
                     :display="refreshing ? 'show' : 'hide'">
                <loading-indicator class="indicator"></loading-indicator>
            </refresh>
            <cell v-for="item in memberList">
                <div class="item-content" @click="toInfo(item)">
                    <div class="head-img">
                        <image :src="item.avatar" style="width: 100px;height: 100px;border-radius: 50px;"/>
                    </div>
                    <div class="item-info">
                        <div style="display: flex;flex-direction: row;align-items: center">
                            <text style="font-size: 30px;">{{item.name}}</text>
                            <div class="mine-top-vip">
                                <text class="mine-top-vip-inner">{{ item.vipName }}</text>
                            </div>
                        </div>
                        <div style="margin-top: 5px;font-size: 27px;">
                            <text style="font-size: 27px;">{{item.mobile}}</text>
                        </div>
                        <div class="member-address" v-if="item.address!=null">
                            <text style="font-size: 30px;">{{item.address}}</text>
                        </div>
                    </div>
                </div>
            </cell>
            <loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
                <!-- <loading-indicator class="indicator"></loading-indicator> -->
            </loading>
        </list>

    </div>

</template>
<script>
    const eeui = app.requireModule('eeui');
    import myNavbar from '../../components/myNavbar/myNavbar.vue'

    const storage = weex.requireModule('storage')
    import {
        list
    } from '../../api/member.js'

    export default {
        name: '',
        data() {
            return {
                loadinging: false,
                refreshing: false,
                memberList: [],
                member: '',
                keyUp: false,
                pageNum: 1,
                addresstype: false
            }
        },
        created() { // 在实例创建完成后被立即调用
            var _this = this
            this.loadMember()
            this.initIconFont()
            if (app.config.params != null) {
                _this.addresstype = app.config.params
            }

        },
        methods: {
            toInfo(item) {
                if (this.addresstype == false) {
                    eeui.openPage({
                        url: 'root://pages/member/memberInfo/memberInfo.js',
                        params: item.id,
                        statusBarType: 'immersion',
                        statusBarStyle: false
                    }, res => {
                        if (res.status == 'stop') {
                            storage.getItem('memberInfo', result => {
                                if (result.data == 'edit') {
                                    this.loadMember()
                                    storage.removeItem('memberInfo')
                                }
                            });
                        }
                    })
                } else {
                    eeui.closePage()
                    storage.setItem('address', JSON.stringify(item), event => {

                    })
                }

            },
            onpullingdown() {

            },
            onrefresh(event) {
                this.refreshing = true
                setTimeout(() => {
                    this.pageNum = 1
                    this.refreshing = false
                    this.loadMember()
                }, 1000)
            },
            onloading(event) {
                this.loadinging = true
                setTimeout(() => {
                    this.loadinging = false
                    this.pageNum += 1
                    this.loadMember()
                }, 0)
            },
            searchGoods(data) {
                list({
                    keyword: data.value
                }).then(res => {
                    res.data.data.forEach(item => {

                        if (!item.avatar) {
                            item.avatar = 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/avatar.png'
                        }

                    })
                    this.memberList = res.data.data
                }).catch(error => {
                })
            },
            empty() {
                this.member = ''
                this.memberList = []
                this.pageNum = 1
                list().then(res => {
                    res.data.data.forEach(item => {
                        if (!item.avatar) {
                            item.avatar = 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/avatar.png'
                        } else {
                            item.avatar = this.thumbnail(item.avatar, 100, 100)
                        }
                    })
                    this.memberList = res.data.data
                })
            },
            bindconfirm(data) {
                list({
                    keyword: data.value
                }).then(res => {
                    res.data.data.forEach(item => {
                        if (!item.avatar) {
                            item.avatar = 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/avatar.png'
                        } else {
                            item.avatar = this.thumbnail(item.avatar, 100, 100)
                        }
                    })
                    this.memberList = res.data.data

                })
            },
            addMember() {

                if (this.checkPermission(['member.add']) == false) {
                    eeui.alert('您没有新增会员权限', function () {
                        return
                    });
                }
                eeui.openPage({
                    url: 'root://pages/member/addMember/addMember.js',
                    statusBarType: 'immersion',
                    params: {
                        type: "add"
                    },
                    statusBarStyle: false
                }, () => {
                    storage.getItem('addMember', result => {
                        if (result.data == 'add') {
                            this.loadMember()
                            storage.removeItem('addMember')
                        }
                    });
                })
            },
            loadMember() {
                if (this.pageNum == 1) {
                    this.memberList = []
                }
                let member = {
                    pageNum: this.pageNum,
                    pageSize: 20,
                    deleted: false
                }
                list(member).then(res => {
                    res.data.data.forEach(item => {
                        if (!item.avatar) {
                            item.avatar = 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/avatar.png'
                        } else {
                            item.avatar = this.thumbnail(item.avatar, 100, 100)
                        }
                        this.memberList.push(item)
                    })

                }).catch(error => {
                })
            },
        },
        components: {
            myNavbar
        },
    }
</script>

<style scoped>
    .app {
        flex: 1;
        background-color: rgb(248, 248, 248);
    }

    .icon {
        font-family: iconfont2;
        margin-top: 15px;
        font-size: 39px;
        color: rgba(42, 42, 54, 1);
        opacity: 0.3;
    }

    .iconTwo{
        font-family: iconfont2;
        font-size: 39px;
        color: rgba(42, 42, 54, 1);
        opacity: 0.3;
    }

    .addmember {
        font-family: iconfont2;
        width: 50px;
        height: 50px;
        font-size: 40px;
    }

    .search_content {
        width: 700px;
        flex-direction: row;
        display: flex;
        margin-left: 20px;
        padding-right: 30px;
        height: 90px;
        align-items: center;

    }

    .search_input_content {
        padding-left: 20px;
        width: 700px;
        height: 64px;
        background-color: white;
        opacity: 0.95;
        border-radius: 16px;
        display: flex;
        flex-direction: row;
        align-items: center;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(212, 215, 220, 1);
    }

    .search_input {
        width: 545px;
        height: 64px;
        margin-left: 0px;
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        opacity: 0.89;
    }

    .icon_cancel {
        color: #D4D7DC;
        margin-left: 30px;
        opacity: 0.95;
    }

    .addMember-content {
        height: 100px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background-color: white;
        align-items: center;
        padding-left: 30px;
        padding-right: 30px;
        border-bottom-color: rgba(0, 0, 0, 0.1);
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }

    .addMember-text {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .text {
        margin-left: 20px;
        font-size: 30px;
    }

    .refresh {
        /*height: 60px;*/
        width: 690px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
        justify-content: center;
        padding-bottom: 30px;
    }

    .loading {
        /*height: 50px;*/
        width: 690px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
        justify-content: center;
        padding-bottom: 30px;
    }

    .indicator {
        margin-top: 16px;
        height: 40px;
        width: 40px;
        color: blue;
    }

    .item-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        border-bottom-width: 2px;
        border-style: solid;
        border-color: rgb(248, 248, 248);
        width: 690px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .head-img {
        height: 100px;
        width: 100px;
    }

    .message_item_content {
        /*margin-top: 5px;*/
        padding-left: 30px;
        padding-right: 30px;
        background-color: white;
    }

    .item-info {
        margin-left: 30px;
        display: flex;
        justify-content: space-between;
        padding-right: 20px;
    }

    .mine-top-vip {
        border-style: solid;
        border-color: rgba(194, 172, 126, 1);
        border-width: 2px;
        margin-left: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2px;
        border-radius: 1px;
    }

    .mine-top-vip-inner {
        height: 30px;
        padding: 0 5px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        line-height: 30px;
        /* font-family: PingFangSC; */
        font-weight: 400;
        background-color: #c2ac7e;
        opacity: 0.6;
        color: rgba(255, 242, 219, 1);
        text-shadow: 1px 1px 0px rgba(131, 101, 59, 0.2);
    }

    .member-address {
        width: 580px;
        padding-right: 20px;
        margin-top: 5px;
    }
</style>
